<!-- 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>测试 - layui</title>
	<style>
	.big{
	position: absolute;
	right:10px;
	top:15px;
	color: #9b9b9b;
	width: 0;
	height: 0;
	border:20px solid #9b9b9b;
	border-left-color: #9b9b9b;
	border-right: none;
	border-top-color: transparent;
	border-bottom-color: transparent;
	}
	.small {
	position: absolute;
	right:11px;
	top:15px;
	color: #fff;
	width: 0;
	height: 0;
	border:20px solid #fff;
	border-left-color: #fff;
	border-right: none;
	border-top-color: transparent;
	border-bottom-color: transparent;
	z-index: 999;
	}
	.close{ //关闭按钮x
	  position:relative;
	  width:1px;
	  height:15px;
	  background: red;
	  transform: rotate(45deg);
	  display: inline-block;
	}
	.close:after{
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width:1px;
	  height:15px;
	  background: red;
	  transform: rotate(270deg);
	}
	</style>
</head>
<body>
<br />
<div class="big"></div>
<div class="big small"></div>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .arrow1 {
            /*position: relative;*/
            margin: 50px auto;
            width: 20px;
            height: 20px;
            border: 10px solid black;
            border-left: none;
            border-bottom: none;
            transform: rotate(45deg);
        }
        /*.arrow2{
            transform:  translate(-60px,-9px);
            position: absolute;
        }*/
    </style>
</head>
<body>
<!--去掉所有注释内容，显示为：右侧书名号，即“》”-->
<div class="arrow1"></div>
</body>
</html>
